<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="box">
		<!-- 提现账户 -->
		<view class="account-content w100 flex-row-center">
			<view class="account-item flex-row-center w100 borderB">
				<text class="name">提现方式</text>
				<view class="item-value flex-row-center ">
					<text class="value">微信提现</text>
				</view>
			</view>
			<view class="account-item flex-row-center w100">
				<text class="name">提现账户</text>
				<view class="item-value flex-row-center">
					<text class="value" v-if="userInfo.newMobile">{{userInfo.newMobile}}</text>
					<text class="value" v-else>{{userInfo.mobile}}</text>
				</view>
			</view>
		</view>
		<!-- 余额明细入口 -->
		<view class="balance-box flex-row-center w100">
			<text class="text" @click="toBalance">余额明细</text>
		</view>
		<!-- 提现主体 -->
		<view class="main flex-row-center w100">
			<view class="title-box w100 flex-row-center">
				<text class="title">可提现金额：</text>
				<text class="price">{{accountInfo.available_balance}}元</text>
			</view>
			<!-- 提现表单 -->
			<view class="from-box w100 flex-row-center">
				<text class="unit">￥</text>
				<up-input border="none" type='number' @focus="intFocus" :customStyle="{height:'100%',margin:'0 24rpx'}"
					placeholderClass="placeholderClass" fontSize="36rpx" color="#DEDEDE" placeholder="请输入提现金额"
					v-model="money"></up-input>
				<text class="btn" @click="allMoney">全部</text>
			</view>
			<!-- 提现说明 -->
			<view class="tips-box w100" v-if="tipsInfo">
				<text class="text">{{tipsInfo}}</text>
			</view>
			<!-- 提现按钮 -->
			<view class="submit-box flex-center">
				<up-button :disabled="isMoney" :customStyle="{'color':'#186059','height':'84rpx'}"
					@click="submitWithdraw" text="立即提现" loadingText="提交中" :loading="loadingState" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)">
					<template #suffix>
						<text class="price-icon">元</text>
					</template></up-button>
			</view>
		</view>
		<!-- 协议 -->
		<view class="agreement-box flex-center">
			<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx" label="已阅读并同意" activeColor="#8BDEB7"
				@change="changeChecked" name="agree" :checked="checked">
			</up-checkbox>
			<view class="content flex-row-center">
				<text class="agreement-name" @click="toProtocol(4)">《提现协议》</text>
			</view>
		</view>
	</view>
	<up-keyboard ref="uKeyboard" @confirm="keyConfirm" mode="number" tips="输入提现金额" :showCancel='false'
		@change="valChange" @backspace="backspace" :overlay="false" :show="keyboardShow"></up-keyboard>
</template>

<script setup>
	import {
		userInfoStore
	} from '@/stores/user.js';
	const userStore = userInfoStore();

	import {
		test
	} from '@/uni_modules/uview-plus';
	import {
		countDecimalPlaces
	} from '@/utils/utools.js';
	import {
		configInfoStore
	} from '@/stores/config';
	const {
		configInfo
	} = configInfoStore();
	const money = ref('');
	const checked = ref(false);
	const accountInfo = ref(computed(() => userStore.accountInfo));
	const userInfo = ref(computed(() => userStore.userInfo));
	const tipsInfo = ref(null);
	const keyboardShow = ref(false);
	const isMoney = ref(true);
	const loadingState = ref(false);
	onLoad(() => {
		userStore.getAccount();
		if (configInfo && configInfo.single_day_withdraw_limit) {
			const {
				single_day_withdraw_limit,
				single_withdraw_amount_limit
			} = configInfo;
			tipsInfo.value =
				`单日累积提现金额${single_day_withdraw_limit.value}、单笔提现金额最大额${single_withdraw_amount_limit.value}`;
		}
	})
	onReady(() => {
		keyboardShow.value = true;
	});
	const valChange = (val) => {
		// 将每次按键的值拼接到value变量中，注意+=写法
		if (countDecimalPlaces(money.value) >= 2) return
		money.value += val;
		isMoney.value = !test.amount(money.value);
		// console.log(test.amount(money.value));
		// console.log(money.value);
	};
	const backspace = () => {
		// 删除value的最后一个字符
		if (money.value.length) {
			money.value = money.value.substr(0, money.value.length - 1);
		}
		isMoney.value = !test.amount(money.value);
		// console.log(money.value);
	};
	const keyConfirm = () => { //键盘得确认按钮
		keyboardShow.value = false;
	}
	const intFocus = () => { //输入框获取焦点
		uni.hideKeyboard();
		keyboardShow.value = true;
	}
	const allMoney = () => { //全部金额
		money.value = accountInfo.value.available_balance;
		isMoney.value = !test.amount(money.value);
	};
	const toBalance = () => { //查看提现明细
		uni.navigateTo({
			url: '/page_user/views/withdrawalDetails'
		})
	}
	const submitWithdraw = async () => { //提交提现
		if (!checked.value) {
			uni.$u.toast('请先阅读并勾选协议');
			return
		}
		if (!test.amount(money.value)) {
			uni.$u.toast('请输入正确的金额');
			return
		}
		if (money.value <= 0) {
			uni.$u.toast('请输入提现金额');
			return
		};
		uni.showLoading({
			title: '提交中'
		})
		loadingState.value = true;
		const res = await $Api.order.submitOrder({
			amount: money.value,
			relationType: 'Withdraw'
		});
		if (res.code === 1) {
			money.value = '';
			isMoney.value = false;
			checked.value = false;
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '提交成功！'
				});
				loadingState.value = false;
			}, 300)
		} else {
			uni.hideLoading();
			loadingState.value = false;
			uni.$u.toast(res.msg);
		}
	}
	const changeChecked = (e) => {
		checked.value = e
	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
</script>
<style>
	/deep/ .placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx !important;
		font-weight: 500;
	}
</style>
<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 48rpx;
		padding-bottom: 400rpx;
	}

	.account-content {
		padding: 0 20rpx;
		border-radius: 12rpx;
		flex-direction: column;
		background-color: #212F31;
		// padding: 0 48rpx;

		// min-height: 640rpx;
		// background: #222528;
		// border-radius: 24rpx;
		.account-item {
			padding: 36rpx 0;
			justify-content: space-between;

			.name {
				color: $title-color;
				font-size: 32rpx;
				font-weight: bold;
			}

			.value {
				font-size: 28rpx;
				color: $description-color;
			}
		}

		.borderB {
			border-bottom: 2rpx solid $description-color;
		}
	}

	.balance-box {
		margin-top: 32rpx;
		justify-content: flex-end;

		.text {
			color: $title-color;
			font-size: 32rpx;
			font-weight: bold;
			text-decoration: underline;
			// text-decoration-color: $price-color;
		}
	}

	.main {
		margin-top: 120rpx;
		flex-direction: column;

		.title-box {
			margin-bottom: 12rpx;

			.title {
				color: $title-color;
				font-size: 28rpx;
				// align-self: flex-start;
			}

			.price {
				color: $price-color;
				font-size: 30rpx;
				font-weight: 500;
				margin-left: 18rpx;
			}
		}

	}

	.from-box {
		justify-content: space-between;
		height: 120rpx;
		border-bottom: 2rpx solid $description-color;


		.unit {
			color: $title-color;
			font-size: 48rpx;
			font-weight: bold;
		}

		.btn {
			color: $attention-color;
			font-size: 26rpx;
			font-weight: 500;
		}
	}

	.tips-box {
		margin-top: 32rpx;

		.text {
			font-size: 22rpx;
			color: $description-color;
		}
	}

	.submit-box {
		width: 336rpx;
		margin-top: 68rpx;
	}

	.agreement-box {
		width: 100%;
		position: absolute;
		bottom: 112rpx;
		left: 0;
		justify-content: center;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>
<style>
	.u-input,
	.u-textarea__count,
	.u-textarea.data-v-b6c174a6 {
		padding: 0 !important;
		background-color: transparent !important;
	}
</style>